{% extends "base.html" %}
{% block title %}tags{% endblock %}
{% block head %}
<style type="text/css">

</style>
{% endblock %}
{% block content %}

<div class="row">
    <div class="col-12">
        <!-- 标题 、功能表单 -->
        <nav class="navbar justify-content-between" style="background-color: #058dee;">

            <a class="navbar-brand">
                <img src="/static/pic/bootstrap-solid.svg" width="30" height="30" class="d-inline align-middle" alt="">
                show_tags
            </a>

            <span class="navbar-text">
                Navbar text with an inline element
            </span>
            <div class="form-inline  needs-validation" novalidate method="GET" acton='/show_tag_page'>
                <div class="form-group">
                    <select class=" custom-select" name='module' id="module" required>
                        <option>s_opcda_client1</option>
                        <option>s_opcda_client2</option>
                        <option>s_opcda_client3</option>
                        <option>modbus1</option>
                        <option>modbus2</option>
                    </select>
                </div>
                <button class="btn btn-warning mx-2" onclick="tag_page()">点击查询</button>
                <button class="btn btn-danger" data-toggle="modal" data-target="#add_group_modal">添加组</button>
            </div>
        </nav>

        <hr class="border-bottom border-danger" />

    </div>

    <!-- 分组表 -->
    <div class="col-12 text-center">
        <table class="table table-bordered table-hover table-secondary ">
            <thead id='tag_keys'>
                <tr > 
                    <th>group_id</th>
                    <th>group_name</th>
                    <th>collect_cycle</th>
                    <th>tags_num</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id='tag_values'>
                {% for gi in group_infos %}
                <tr>
                    <td data-html="true" title="组"> {{gi['group_id']}}</td>
                    <td data-html="true" title="组名"> {{gi['group_name']}}</td>
                    <td data-html="true" title="采集周期"> {{gi['collect_cycle']}}</td>
                    <td data-html="true" title="标签数量"> {{gi['tags_num']}}</td>
                    <td class="p-0 m-0 align-middle">
                        <a id="showtagmodel1" href="javascript:void(0)" onclick="show_page_modal('{{gi['group_id']}}')"
                            class="btn btn-outline-info btn-sm p-1 m-0">
                            编辑
                        </a> |
                        <a id="showtagmodel1" href="javascript:void(0)" onclick="show_page_modal('{{gi['group_id']}}')"
                            class="btn btn-outline-info btn-sm p-1 m-0">
                            修改
                        </a> |
                        <a id="showtagmodel1" href="javascript:void(0)" onclick="delete_group('{{gi['group_id']}}')"
                            class="btn btn-outline-danger btn-sm p-1 m-0">
                            删除
                        </a>
                        <a id="showtagmodel1" href="javascript:void(0)"
                            onclick="confirm_delete_group('{{gi['group_id']}}')"
                            class="btn btn-outline-danger btn-sm p-1 m-0">
                            删除测试
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<!-- 分页 -->
<div class="row mt-2 ">
    <div class="col-md-12 col-sm-12 ">
        <nav>
            <ul class="pagination pagination-md justify-content-end">
                <ul class="pagination  justify-content-end" id='page'>
                    <li class="page-item ">
                        {% if paginate.has_prev %}
                        <a class="page-link form-control" tabindex="-1"
                            href="/show_tag_page?page={{ paginate.prev_num }}">Previous</a>
                        {% endif %}
                    </li>
                    {%  for i in  paginate.iter_pages %}
                    {% if i %}
                    {%if paginate.page == i%}
                    <li class="page-item active">
                        <a class="page-link form-control" href="/show_tag_page?page={{ i }}">{{ i }}</a>
                    </li>
                    {%else%}
                    <li class="page-item ">
                        <a class="page-link form-control" href="/show_tag_page?page={{ i }}">{{ i }}</a>
                    </li>
                    {% endif %}
                    {% else %}
                    <li class="page-item ">
                        <a class="page-link form-control" href="/show_tag_page?page={{ i }}">...</a>
                    </li>

                    {% endif %}

                    {% endfor %}

                    {% if paginate.has_next %}
                    <a class="page-link form-control" href="/show_tag_page?page={{ paginate.next_num }}">Next</a>
                    {% endif %}

                    </li>
                </ul>

                <li class="page-item"><a class="page-link form-control">共</a></li>
                <input id='total' name='total' disabled class="form-control" style="width: 60px;"
                    value="{{ paginate.total }}" />
                <li class="page-item"><a class="page-link form-control">组</a></li>
                <li class="page-item"><a class="page-link form-control">共</a></li>
                <input id='max_pages' name='max_pages' disable class="form-control" style="width: 60px;"
                    value="{{ paginate.pages }}" />
                <li class="page-item"><a class="page-link form-control">页</a></li>
            </ul>
        </nav>
    </div>
</div>
<!--tag展示-->
<div class="modal fade" id="page_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog  modal-sm modal-dialog-centered" style="max-width:1000px;">
        <div class="modal-content">
            <div class="modal-header">


                <div class="form-inline my-1 my-lg-0">
                    <label for="group_num">组号:</label>
                    <input class="form-control mr-sm-1 col-sm-1" name='group_num' id='group_num'>
                    <label for="group_num">模块名称:</label>
                    <input class="form-control mr-sm-1 col-sm-3" name='module_name' id='module_name'>
                    <button class="btn btn-outline-success my-2 my-sm-0" onclick="show_add_tag_modal()">新建位号</button>
                </div>
                <div class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-1" placeholder="tag name" name="tagname" id=tagname>
                    <button class="btn btn-outline-success my-2 my-sm-0" onclick="Search()">查询位号</button>
                </div>
            </div>
            <div class="modal-body">


                <table class="table  table-bordered table-sm text-center table-hover table-info">
                    <thead id='keys'>

                    </thead>
                    <tbody id='values'>

                    </tbody>
                </table>

                <div class="row mt-1 ">
                    <div class="col-md-12 col-sm-12 ">
                        <nav id='tag_page'>

                        </nav>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-success" onclick="hide_page_modal()">
                    关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--group新增-->
<div class="modal fade" id="add_group_modal" tabindex="-1" role="dialog" aria-labelledby="addtag" aria-hidden="true">
    <div class="modal-dialog  modal-sm modal-dialog-centered" style="max-width:300px;">
        <div class="modal-content">
            <div class="modal-header">
                <div class="form-inline my-2 my-lg-0">
                    <h1 class="h4">新增组</h1>
                </div>
            </div>
            <div class="modal-body">
                <div class="form-signin" action="" method="post">
                    <div class="form-label-group" style="margin-bottom:1rem">
                        <input class="form-control form-control-md" id="group_name" autofocus="" required="" type="text"
                            placeholder="group_name" name="group_name">
                        <label for="pub_name" style="display: none">组名</label>
                    </div>
                    <div class="form-label-group" style="margin-bottom:1rem">
                        <label for="collect_cycle" style="display: none">采集周期</label>
                        <select class="form-control form-control-md" name='collect_cycle' id="collect_cycle">
                            <option>5</option>
                            <option>10</option>
                            <option selected>10</option>
                            <option>15</option>
                            <option>20</option>
                            <option>30</option>
                        </select>
                    </div>
                    <p class="h6 text-danger" id='add_error'></p>
                    <input class="btn btn-md btn-primary btn-block" type="button" onclick="add_group()" value="新建">
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-success" onclick="hide_add_group_modal()">
                    关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--group修改-->
<div class="modal fade" id="alter_group_modal" tabindex="-1" role="dialog" aria-labelledby="addtag" aria-hidden="true">
    <div class="modal-dialog  modal-sm modal-dialog-centered" style="max-width:300px;">
        <div class="modal-content">
            <div class="modal-header">
                <div class="form-inline my-2 my-lg-0">
                    <h1 class="h4">修改组参数</h1>
                </div>
            </div>
            <div class="modal-body">
                <div class="form-signin" action="" method="post">
                    <div class="form-label-group" style="margin-bottom:1rem">
                        <input class="form-control form-control-md" id="alter_group_id" autofocus="" required=""
                            type="text" placeholder="alter_group_id" name="alter_group_id">
                        <label for="alter_group_id" style="display: none">组ID</label>
                    </div>
                    <div class="form-label-group" style="margin-bottom:1rem">
                        <input class="form-control form-control-md" id="alter_group_name" autofocus="" required=""
                            type="text" placeholder="alter_group_name" name="alter_group_name">
                        <label for="alter_group_name" style="display: none">组名</label>
                    </div>
                    <div class="form-label-group" style="margin-bottom:1rem">
                        <label for="alter_collect_cycle" style="display: none">采集周期</label>
                        <select class="form-control form-control-md" name='alter_collect_cycle'
                            id="alter_collect_cycle">
                            <option>5</option>
                            <option selected>10</option>
                            <option>15</option>
                            <option>20</option>
                            <option>30</option>
                        </select>
                    </div>
                    <p class="h6 text-danger" id='add_error'></p>
                    <input class="btn btn-md btn-primary btn-block" type="button" onclick="confirm_alter_group()"
                        value="修改">
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-success" onclick="hide_alter_group_modal()">
                    关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--tag新增-->
<div class="modal fade" id="add_tag_modal" tabindex="-1" role="dialog" aria-labelledby="addtag" aria-hidden="true">
    <div class="modal-dialog  modal-sm modal-dialog-centered" style="max-width:300px;">
        <div class="modal-content">
            <div class="modal-header">
                <div class="form-inline my-2 my-lg-0">
                    <h1 class="h4">新增位号</h1>
                </div>
            </div>
            <div class="modal-body">
                <div class="form-signin" action="" method="post">
                    <div class="form-label-group" style="margin-bottom:1rem">
                        <input class="form-control form-control-md" id="pub_name" autofocus="" required="" type="text"
                            placeholder="pub_name" name="pub_name">
                        <label for="pub_name" style="display: none">发布标签名</label>
                    </div>
                    <div class="form-label-group" style="margin-bottom:1rem">
                        <label for="data_type" style="display: none">数据类型</label>
                        <select class="form-control form-control-md" name='data_type' id="data_type">
                            <option>开关量</option>
                            <option selected>模拟量</option>
                            <option>字符串</option>
                        </select>
                    </div>
                    <div class="form-label-group" style="margin-bottom:1rem">
                        <label for="sub_name" style="display: none">采集标签名</label>
                        <input class="form-control form-control-md" id="sub_name" required="" type="sub_name"
                            placeholder="sub_name" name="sub_name">
                    </div>
                    <p class="h5 text-danger" id='add_error'></p>
                    <input class="btn btn-md btn-primary btn-block" type="button" onclick="add_tag()" value="新建">
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-success" onclick="hide_add_tag_modal()">
                    关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--tag修改-->
<div class="modal fade" id="alter_tag_modal" tabindex="-1" role="dialog" aria-labelledby="addtag" aria-hidden="true">
    <div class="modal-dialog  modal-sm modal-dialog-centered" style="max-width:300px;">
        <div class="modal-content">
            <div class="modal-header">
                <div class="form-inline my-2 my-lg-0">
                    <h1 class="h4">修改位号</h1>
                </div>
            </div>
            <div class="modal-body">
                <div class="form-signin" action="" method="post">
                    <div class="form-label-group" style="margin-bottom:1rem">
                        <input class="form-control form-control-md" id="tag_id" autofocus="" required="" type="text"
                            placeholder="tag_id" name="tag_id">
                        <label for="tag_id" style="display: none">tag_id</label>
                    </div>
                    <div class="form-label-group" style="margin-bottom:1rem">
                        <input class="form-control form-control-md" id="publish_tag_name" autofocus="" required=""
                            type="text" placeholder="publish_tag_name" name="publish_tag_name">
                        <label for="publish_tag_name" style="display: none">发布标签名</label>
                    </div>
                    <div class="form-label-group" style="margin-bottom:1rem">
                        <label for="data_type" style="display: none">数据类型</label>
                        <select class="form-control form-control-md" name='data_type' id="data_type">
                            <option>开关量</option>
                            <option selected>模拟量</option>
                            <option>字符串</option>
                        </select>
                    </div>
                    <div class="form-label-group" style="margin-bottom:1rem">
                        <label for="source_tag_name" style="display: none">采集标签名</label>
                        <input class="form-control form-control-md" id="source_tag_name" required="" type="text"
                            placeholder="source_tag_name" name="source_tag_name">
                    </div>
                    <p class="h5 text-danger" id='add_error'></p>
                    <input class="btn btn-md btn-primary btn-block" type="button" onclick="alter_tag_confirm()"
                        value="确认修改">
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-success" onclick="hide_alert_tag_modal()">
                    放弃修改
                </button>
            </div>
        </div>
    </div>
</div>

<!--删除组确认-->
<div class="modal fade" id="delete_group_modal" tabindex="-1" role="dialog" aria-labelledby="addtag" aria-hidden="true">
    <div class="modal-dialog  modal-sm modal-dialog-top" style="max-width:800px;">
        <div class="modal-content">
            <div class="modal-header">
                <h2>确认删除组<span class="badge badge-info" id='gl'></span>吗？</h2>
            </div>
            <div class="modal-body">
                <h1 class="dispaly-4">新建组不容易的，骚年请考虑一下。</h1>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-danger" onclick="delete_anyway()">
                    滚犊子
                </button>
                <button type="button" class="btn btn-outline-success" onclick="hide_confirm_delete_group()">
                    好吧,你赢了
                </button>

            </div>
        </div>
    </div>
</div>

<script>
    var csrftoken = $("meta[name=csrf-token]").attr("content");
    //显示分页模态框
    function show_page_modal(group_id) {
        $('#page_modal').modal("show");
        page(group_id);

    }

    function shoe_alter_group_modal(group_id) {
        $('#alter_group_modal').modal("show");
        alter_group(group_id)
    }

    function show_alter_tag_modal() {
        $('#alter_tag_modal').modal("show");
    }

    function hide_page_modal() {
        $('#page_modal').modal("hide");
    }

    function hide_alter_group_modal() {
        $('#alter_group_modal').modal("hide");
    }

    function show_add_tag_modal() {
        $('#add_tag_modal').modal("show");
    }

    function hide_add_tag_modal() {
        $('#add_tag_modal').modal("hide");
    }

    function hide_alert_tag_modal() {
        $('#alter_tag_modal').modal("hide");
    }

    function hide_add_group_modal() {
        $('#add_group_modal').modal("hide");
    }

    function hide_confirm_delete_group() {
        $('#delete_group_modal').modal("hide");
    }

    function Search() {
        var tagname = $("#tagname").val();
        var module_name = $("#module").val();
        var group_id = $("#group_num").val()
        $.ajax({
            url: "{{url_for('cs.show_tag_search')}}",
            data: {
                "tagname": tagname,
                "module": module_name,
                "group_id": group_id,
            },
            type: 'get',
            dataType: 'json',
            success: pages_success,
            error: function (data) {
                console.log(data);
            },
        });
        return false;
    }

    function page(group_id) {
        var module_name = $("#module").val()
        $("#group_num").val(group_id)
        $("#module_name").val(module_name)
        $.ajax({
            url: "{{url_for('cs.show_tag_page')}}",
            data: {
                "module": module_name,
                "group_id": group_id,
            },
            headers: {
                "X-CSRFToken": csrftoken
            },
            type: 'post',
            dataType: 'json',
            success: pages_success,
            error: function (data) {
                console.log(data);
            },
        });
        return false
    }

    function add_tag() {
        var module_name = $("#module_name").val()
        var group_id = $("#group_num").val()
        var pub_name = $("#pub_name").val().trim()
        var data_type = $("#data_type").val()
        var sub_name = $("#sub_name").val().trim()

        $.ajax({
            url: "{{url_for('cs.add_tag')}}",
            data: {
                "module": module_name,
                "group_id": group_id,
                "pub_name": pub_name,
                "data_type": data_type,
                "sub_name": sub_name,
            },
            headers: {
                "X-CSRFToken": csrftoken
            },
            type: 'post',
            dataType: 'json',
            success: operate_success,
            error: function (data) {
                console.log(data);

            },
        });
        return false
    }

    function alter_tag(publish_tag_name) {
        var module_name = $("#module_name").val()
        var group_id = $("#group_num").val()
        show_alter_tag_modal()
        // console.log(module_name,group_id,publish_tag_name)
        $.ajax({
            url: "{{url_for('cs.alter_tag')}}",
            data: {
                "module": module_name,
                "group_id": group_id,
                "publish_tag_name": publish_tag_name,
            },
            type: 'get',
            dataType: 'json',
            success: alter_tag_success,
            error: function (data) {
                console.log(data);

            },
        });
        return false
    }

    function alter_tag_confirm() {
        var group_id = $("#group_num").val().trim()
        var tag_id = $("#tag_id").val().trim()
        var module_name = $("#module_name").val().trim()
        var publish_tag_name = $("#publish_tag_name").val().trim()
        var source_tag_name = $("#source_tag_name").val().trim()
        var data_type = $("#data_type").val().trim()
        console.log(module_name, group_id, tag_id, publish_tag_name, source_tag_name, data_type)
        $.ajax({
            url: "{{url_for('cs.alter_tag')}}",
            data: {
                "group_id": group_id,
                "tag_id": tag_id,
                "module": module_name,
                "publish_tag_name": publish_tag_name,
                "data_type": data_type,
                "source_tag_name": source_tag_name,
            },
            headers: {
                "X-CSRFToken": csrftoken
            },
            type: 'post',
            dataType: 'json',
            success: operate_success,
            error: function (data) {
                console.log(data);

            },
        });
        return false
    }

    function model_page(page) {
        var module_name = $("#module").val()
        var group_id = $("#group_num").val()
        $.ajax({
            url: "{{url_for('cs.show_tag_page')}}",
            data: {
                "module": module_name,
                "group_id": group_id,
                "page": page,
            },
            headers: {
                "X-CSRFToken": csrftoken
            },
            type: 'post',
            dataType: 'json',
            success: pages_success,
            error: function (data) {
                console.log(data);
            },
        });
        return false
    }

    function add_group() {
        var module_name = $("#module").val()
        var group_name = $("#group_name").val()
        var collect_cycle = $("#collect_cycle").val()
        console.log(module_name, group_name, collect_cycle)
        $.ajax({
            url: "{{url_for('cs.add_group')}}",
            data: {
                "module": module_name,
                "group_name": group_name,
                "collect_cycle": collect_cycle,
            },
            headers: {
                "X-CSRFToken": csrftoken
            },
            type: 'post',
            dataType: 'json',
            success: operate_success,
            error: function (data) {
                console.log(data);

            },

        });
        return false;
    }

    function alter_group(group_id) {
        var module_name = $("#module").val()
        $.ajax({
            url: "{{url_for('cs.alter_group')}}",
            data: {
                "module": module_name,
                "group_id": group_id,
            },
            type: 'get',
            dataType: 'json',
            success: alter_group_success,
            error: function (data) {
                console.log(data);

            },

        });
        return false;
    }

    function confirm_alter_group(group_id) {
        var module_name = $("#module").val()
        var alter_group_name = $("#alter_group_name").val()
        var alter_collect_cycle = $("#alter_collect_cycle").val()
        var alter_group_id = $("#alter_group_id").val()
        $.ajax({
            url: "{{url_for('cs.alter_group')}}",
            data: {
                "module": module_name,
                "collect_cycle": alter_collect_cycle,
                "group_name": alter_group_name,
                "group_id": alter_group_id,
            },
            headers: {
                "X-CSRFToken": csrftoken
            },
            type: 'post',
            dataType: 'json',
            success: operate_success,
            error: function (data) {
                console.log(data);

            },

        });
        return false;
    }

    function confirm_delete_group(id) {
        $('#delete_group_modal').modal("show");
        $("#gl").text(id)
    }

    function delete_anyway() {
        var id = $("#gl").text()
        delete_group1(id)
    }

    function delete_group1(id) {
        var module_name = $("#module").val()
        $.ajax({
            url: "{{url_for('cs.delete_group')}}",
            data: {
                "module": module_name,
                "group_id": id,
            },
            headers: {
                "X-CSRFToken": csrftoken
            },
            type: 'post',
            dataType: 'json',
            success: operate_success,
            error: function (data) {
                console.log(data);

            },

        });


        return false;
    }

    function delete_group(id) {
        var module_name = $("#module").val()
        console.log(id)
        if (confirm('添加组不容易的，少年请三思，确认删除吗？')) {
            $.ajax({
                url: "{{url_for('cs.delete_group')}}",
                data: {
                    "module": module_name,
                    "group_id": id,
                },
                headers: {
                    "X-CSRFToken": csrftoken
                },
                type: 'post',
                dataType: 'json',
                success: operate_success,
                error: function (data) {
                    console.log(data);

                },

            });
        }

        return false;
    }

    function delete_tag(publish_tag_name) {
        var module_name = $("#module_name").val()
        var group_id = $("#group_num").val()
        console.log(publish_tag_name, module_name, group_id)

        $.ajax({
            url: "{{url_for('cs.delete_tag')}}",
            data: {
                "module": module_name,
                "group_id": group_id,
                "publish_tag_name": publish_tag_name,
            },
            type: 'get',
            dataType: 'json',
            success: operate_success,
            error: function (data) {
                console.log(data);
            },
        });
        return false;
    }

    // 分页
    function pages_success(data) {
        var $keys = '';
        var $values = '';
        var $lis = '';
        var $lis1 = '';
        // console.log(data.paginate)
        var tags = data.paginate.items
        if (data.paginate.total > 0) {
            for (i in tags) {
                var keys_td = ''
                var values_td = ''
                for (t in tags[i]) {
                    keys_td += '<th scope="row" class="table-info p-1">' + t + '</th>'
                    values_td += '<td scope="row" ">' + tags[i][t] + '</td>'
                };
                $keys = `<tr>${keys_td }<th scope="row" class="table-info">操作</th></tr>`
                $values +=
                    `<tr>'${values_td}<th scope="row" >
                    <a class="btn btn-outline-warning btn-sm p-0" onclick="alter_tag('${tags[i]['publish_tag_name']}')" >修改</a> |
                    <a class="btn btn-outline-danger  btn-sm p-0" onclick="delete_tag('${tags[i]['publish_tag_name']}')">删除</a>
                    </th></tr>`
                var $subject_keys = $('#keys');
                var $subject_values = $('#values');
                $subject_keys.html($keys)
                $subject_values.html($values)
            };
            var lis = ''
            data.paginate.iter_pages.forEach((item, index) => {
                if(item){
                                  var tmp = ''
                if (data.paginate.page == item) {
                    tmp =
                        `<li class="page-item active "><a class="page-link form-control" href="javascript:model_page(${item}) "> ${item} </a></li>`
                } else {
                    tmp =
                        `<li class="page-item "><a class="page-link form-control" href="javascript:model_page(${item})"> ${item} </a></li>`
                }  
                }
                else{
                    tmp =
                        `<li class="page-item "><a class="page-link form-control" href="javascript:void(0)">...</a></li>` 
                }

                lis += tmp
            });
            var tag_page =

                `<ul class="pagination pagination-md justify-content-end">
                <li class="page-item ">
                ${ data.paginate.has_prev ?
                `<a class="page-link form-control" tabindex="-1"
                        href="javascript:model_page(${data.paginate.prev_num},1)">Previous</a>`: ''}
                        
                </li>
                ${lis}
                <li class="page-item ">
                ${ data.paginate.has_next ?
                    `<a class="page-link form-control" tabindex="-1"
                    href="javascript:model_page(${data.paginate.next_num},1)">Next</a>` : ''}
                </li>
                <li class="page-item"><a class="page-link form-control">共</a></li>
                <input id='total' name='total' disabled class="form-control" style="width: 60px;"
                    value=${ data.paginate.total } />
                <li class="page-item"><a class="page-link form-control">条</a></li>
                <li class="page-item"><a class="page-link form-control">共</a></li>
                <input id='max_pages' name='max_pages' disable class="form-control" style="width: 60px;"
                    value=${ data.paginate.pages } />
                <li class="page-item"><a class="page-link form-control">页</a></li>`;

            var $tag_page = $('#tag_page');
            $tag_page.html(tag_page);
        } else {
            $values += '<tr>' + '<td scope="row" class="table-danger">' + '没有位号信息，请重新上传。。。' + '</td>' + '</tr>';
            var $subject_con = $('#values');
            $subject_con.html($values);
        }
    }
    
    
    // 操作结果
    function operate_success(data) {
        // console.log(data.success, data.message,data.tag_name,data.group_infos,data.group_id,data.tag)
        if (data.success) {
            $('#add_tag_modal').modal("hide");
            $('#add_group_modal').modal("hide");
            $('#delete_group_modal').modal("hide");
            $('#alter_group_modal').modal("hide");
            $('#alter_tag_modal').modal("hide");
        } else {
            $("#add_error").text(data.message)
        }
    }

    function alter_group_success(data) {
        console.log(data.success, data.message, data.group_info)
        $("#alter_group_name").val(data.group_info.group_name)
        $("#alter_collect_cycle").val(data.group_info.collect_cycle)
        $("#alter_group_id").val(data.group_info.group_id)
    }

    function alter_tag_success(data) {
        // console.log(data.success, data.message,data.tag)
        $("#tag_id").val(data.tag.tag_id)
        $("#publish_tag_name").val(data.tag.publish_tag_name)
        $("#collect_cycle").val(data.tag.collect_cycle)
        $("#source_tag_name").val(data.tag.source_tag_name)
    }

    //  首次访问，定时刷新
    function tag_page() {
        var module_name = $("#module").val()
        $.ajax({
            url: "{{url_for('cs.show_tag_page')}}",
            data: {
                "module": module_name,
                "pages": 10,
                "page": 1,
            },
            headers: {
                "X-CSRFToken": csrftoken
            },
            type: 'post',
            dataType: 'json',
            success: tag_page_success,
            error: function (data) {
                console.log(data);
            },
        });
        return false;
    }

    function tag_page_success(data) {
        var $values = '';
        var count = data.group_infos.length
        console.log(data)
        var $keys = ''
        if (data.module == 'modbus1') {
            $keys =
                `<tr>
                    <th>slave_id</th>
                    <th>fun_code</th>
                    <th>collect_cycle</th>
                    <th>tags_num</th>
                    <th>操作</th>
                    </tr>`
        }
        else{
            $keys =
                `<tr>
                    <th>group_id</th>
                    <th>group_name</th>
                    <th>collect_cycle</th>
                    <th>tags_num</th>
                    <th>操作</th>
                </tr>`
        }
        var $subject_keys = $('#tag_keys');
        $subject_keys.html($keys)
        if (count > 0) {
            for (i in data.group_infos) {
                var $keys = ''
                var $values_td = ''
                for (t in data.group_infos[i]) {
                    $values_td =
                        '<td scope="row" >' + data.group_infos[i]['group_id'] + '</td>' +
                        '<td scope="row" >' + data.group_infos[i]['group_name'] + '</td>' +
                        '<td scope="row" >' + data.group_infos[i]['collect_cycle'] + '</td>' +
                        '<td scope="row" >' + data.group_infos[i]['tags_num'] + '</td>' +
                        `<td class="p-0 m-0 align-middle">
                        <a id="showtagmodel1" href="javascript:void(0)" onclick="show_page_modal(${data.group_infos[i]['group_id']})"
                            class="btn btn-outline-info btn-sm p-1 m-0">
                            查看
                        </a> |
                        <a id="showtagmodel1" href="javascript:void(0)" onclick="shoe_alter_group_modal(${data.group_infos[i]['group_id']})"
                            class="btn btn-outline-info btn-sm p-1 m-0">
                            修改
                        </a> |
                        <a id="showtagmodel1" href="javascript:void(0)" onclick="delete_group(${data.group_infos[i]['group_id']})"
                            class="btn btn-outline-danger btn-sm p-1 m-0">
                            删除
                        </a>
                        <a id="showtagmodel1" href="javascript:void(0)" onclick="confirm_delete_group(${data.group_infos[i]['group_id']})"
                            class="btn btn-outline-danger btn-sm p-1 m-0">
                            删除测试
                        </a>
                    </td>`
                };

                $values += '<tr>' + $values_td + '</tr>'
                var $subject_con = $('#tag_values');
                $subject_con.html($values)

            }
        } else {
            $values += '<tr>' + '<td scope="row" class="table-danger">' + '没有位号信息，请先配置。。。' + '</td>' + '</tr>'
            var $subject_con = $('#tag_values');
            $subject_con.html($values)
        }

    }

    $(document).ready(function () {
        tag_page()
    })

    var int = self.setInterval("tag_page()", 10000);
</script>

{% endblock %}